﻿@{
    Layout = null;
}
<link href="~/Content/assets/plugins/sign_board/sign.css" rel="stylesheet" />
<link href="~/Content/assets/plugins/sign_board/sign/iconfont.css" rel="stylesheet" />
<link href="~/Content/assets/plugins/sign_board/sign/animate.css" rel="stylesheet" />

<script src="~/Content/assets/js/jquery-1.10.2.min.js"></script>
<script src="~/Content/assets/plugins/sign_board/caclendar.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<style>
    .btnsign {
        border: none;
        background-color: #ff6666;
        color: white;
        font-size: 16px;
        width: 210px;
        height: 50px;
        border-radius: 10px;
        cursor: pointer;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        if ('@ViewBag.isCheck' == 'True') {
            $("#btnCheck").attr("disabled", "disabled").attr("value", "✔您已签到过，请明天再来").css("background-color", "silver");
        }
    })
</script>
<div style="float: left;" id="calendar"></div>
<div style="float: left; margin-left: 20px;">
    @{using (Ajax.BeginForm("CheckToDay", "UserDetails", new AjaxOptions { OnSuccess = "CheckOnSuccess" }))
      {
        <input type="submit" value="签到" id="btnCheck" class="btnsign" /> <b>@System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetDayName(DateTime.Now.DayOfWeek)</b>
        <div style="margin-top: 20px;">(每天签到可以领积分哦~)</div>
      }
        <script>
            function CheckOnSuccess(e) {
                $("#btnCheck").attr("disabled", "disabled").val(e.Message).css("background-color", "silver");
                $(".score").text(parseInt($(".score").text()) + 5);//签到成功，即时更新
                calUtil.getData(calUtil.showYear, calUtil.showMonth);//签到成功，即时更新
            }
        </script> 
    }
    <div style="color: green">我的积分：<b class="score" style="color: #ff6666; font-size: 25px;">@ViewBag.myScore</b></div>
    <div class="animate"></div>
</div>

<!--动画特效 begin-->
<script type="text/javascript">
    (function ($) {
        $.extend({
            tipsBox: function (options) {
                options = $.extend({
                    obj: null,  //jq对象，要在那个html标签上显示
                    str: "+1",  //字符串，要显示的内容;也可以传一段html，如: "<b style='font-family:Microsoft YaHei;'>+1</b>"
                    startSize: "12px",  //动画开始的文字大小
                    endSize: "35px",    //动画结束的文字大小
                    interval: 1500,  //动画时间间隔
                    color: "#ff6666",    //文字颜色
                    callback: function () { }    //回调函数
                }, options);
                $("body").append("<span class='num'>" + options.str + "</span>");
                var box = $(".num");
                var left = options.obj.offset().left + options.obj.width() / 2;
                var top = options.obj.offset().top - options.obj.height();
                box.css({
                    "position": "absolute",
                    "left": left + "px",
                    "top": top + "px",
                    "z-index": 9999,
                    "font-size": options.startSize,
                    "line-height": options.endSize,
                    "color": options.color
                });
                box.animate({
                    "font-size": options.endSize,
                    "opacity": "0",
                    "top": top - parseInt(options.endSize) + "px"
                }, options.interval, function () {
                    box.remove();
                    options.callback();
                });
            }
        });
    })(jQuery);

    function niceIn(prop) {
        prop.find('i').addClass('niceIn');
        setTimeout(function () {
            prop.find('i').removeClass('niceIn');
        }, 1000);
    }
    $(function () {
        $("#btnCheck").click(function () {
            $.tipsBox({
                obj: $(".animate"),
                str: "积分+5",
                callback: function () {
                }
            });
            niceIn($(this));
        });
    });
</script>
<!--动画特效 end-->